<!DOCTYPE html>
<!--[if IE 9]>         <html class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if gt IE 9]><!-->
<html class="no-js" lang="en">
	<!--<![endif]-->

	<head>
		<meta charset="utf-8">

		<title>调查结果</title>

		<meta name="description" content="AppUI is a Web App Bootstrap Admin Template created by pixelcave and published on Themeforest">
		<meta name="author" content="pixelcave">
		<meta name="robots" content="noindex, nofollow">

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<!-- Icons -->
		<!-- The following icons can be replaced with your own, they are used by desktop and mobile browsers -->
		<link rel="shortcut icon" href="img/favicon.png">
		<link rel="apple-touch-icon" href="img/icon57.png" sizes="57x57">
		<link rel="apple-touch-icon" href="img/icon72.png" sizes="72x72">
		<link rel="apple-touch-icon" href="img/icon76.png" sizes="76x76">
		<link rel="apple-touch-icon" href="img/icon114.png" sizes="114x114">
		<link rel="apple-touch-icon" href="img/icon120.png" sizes="120x120">
		<link rel="apple-touch-icon" href="img/icon144.png" sizes="144x144">
		<link rel="apple-touch-icon" href="img/icon152.png" sizes="152x152">
		<link rel="apple-touch-icon" href="img/icon180.png" sizes="180x180">
		<!-- END Icons -->

		<!-- Stylesheets -->
		<!-- Bootstrap is included in its original form, unaltered -->
		<link rel="stylesheet" href="css/bootstrap.min.css">

		<!-- Related styles of various icon packs and plugins -->
		<link rel="stylesheet" href="css/plugins.css">
		<link rel="stylesheet" href="css/page.css" />
		<!-- The main stylesheet of this template. All Bootstrap overwrites are defined in here -->
		<link rel="stylesheet" href="css/main.css">
		<link  href="css/laypage.css" />
		<!-- Include a specific file here from css/themes/ folder to alter the default theme of the template -->

		<!-- The themes stylesheet of this template (for using specific theme color in individual elements - must included last) -->
		<link rel="stylesheet" href="css/themes/amethyst.css">
		<link rel="stylesheet" href="css/laypage.css">
		<!-- END Stylesheets -->

		<!-- Modernizr (browser feature detection library) -->
		<script src="js/vendor/modernizr-3.3.1.min.js"></script>
	</head>

	<body>
		<!-- Page Wrapper -->
		<!-- In the PHP version you can set the following options from inc/config file -->
		<!--
            Available classes:

            'page-loading'      enables page preloader
        -->
		<div id="page-wrapper" class="page-loading">
			<!-- Preloader -->
			<!-- Preloader functionality (initialized in js/app.js) - pageLoading() -->
			<!-- Used only if page preloader enabled from inc/config (PHP version) or the class 'page-loading' is added in #page-wrapper element (HTML version) -->
			<div class="preloader">
				<div class="inner">
					<!-- Animation spinner for all modern browsers -->
					<div class="preloader-spinner themed-background hidden-lt-ie10"></div>

					<!-- Text for IE9 -->
					<h3 class="text-primary visible-lt-ie10"><strong>Loading..</strong></h3>
				</div>
			</div>
			<!-- END Preloader -->

			<!-- Page Container -->
			<!-- In the PHP version you can set the following options from inc/config file -->
			<!--
                Available #page-container classes:

                'sidebar-light'                                 for a light main sidebar (You can add it along with any other class)

                'sidebar-visible-lg-mini'                       main sidebar condensed - Mini Navigation (> 991px)
                'sidebar-visible-lg-full'                       main sidebar full - Full Navigation (> 991px)

                'sidebar-alt-visible-lg'                        alternative sidebar visible by default (> 991px) (You can add it along with any other class)

                'header-fixed-top'                              has to be added only if the class 'navbar-fixed-top' was added on header.navbar
                'header-fixed-bottom'                           has to be added only if the class 'navbar-fixed-bottom' was added on header.navbar

                'fixed-width'                                   for a fixed width layout (can only be used with a static header/main sidebar layout)

                'enable-cookies'                                enables cookies for remembering active color theme when changed from the sidebar links (You can add it along with any other class)
            -->
			<div id="page-container" class="header-fixed-top">

				<!-- Main Container -->
				<div id="main-container">
					<!-- Header -->
					<!-- In the PHP version you can set the following options from inc/config file -->
					<!--
                        Available header.navbar classes:

                        'navbar-default'            for the default light header
                        'navbar-inverse'            for an alternative dark header

                        'navbar-fixed-top'          for a top fixed header (fixed main sidebar with scroll will be auto initialized, functionality can be found in js/app.js - handleSidebar())
                            'header-fixed-top'      has to be added on #page-container only if the class 'navbar-fixed-top' was added

                        'navbar-fixed-bottom'       for a bottom fixed header (fixed main sidebar with scroll will be auto initialized, functionality can be found in js/app.js - handleSidebar()))
                            'header-fixed-bottom'   has to be added on #page-container only if the class 'navbar-fixed-bottom' was added
                    -->
					<header class="navbar navbar-inverse navbar-fixed-top">
						<!-- Left Header Navigation -->
						<ul class="nav navbar-nav-custom">
							<!-- Header Link -->
							<li class="hidden-xs animation-fadeInQuick">
								<a href="survey.html"><strong><big>问道</big></strong></a>
							</li>
							<!-- END Header Link -->
						</ul>
						<!-- END Left Header Navigation -->

						<!-- Right Header Navigation -->
						<ul class="nav navbar-nav-custom pull-right">
							<!-- User Dropdown -->
							<li class="dropdown">
								<span> </span>
								<a onclick="logout()" class="dropdown-toggle" data-toggle="dropdown">
									注销
								</a>
							</li>
								<!-- END User Dropdown -->
						</ul>
						<!-- END Right Header Navigation -->
					</header>
					<!-- END Header -->

					<!-- Page content -->
					<div id="page-content">
						<!-- Blank Header -->
						<div class="content-header">
							<div class="row">
								<div class="col-sm-6">
									<div class="header-section">
										<h1 style="display: inline;">调查结果</h1>
										<h5 style="display: inline;" id="survey-name">-学生处满意度调查</h5>
									</div>
								</div>
							</div>
						</div>
						<!-- END Blank Header -->

						<!-- Block Tabs -->
						<div class="block full">
							<!-- Block Tabs Title -->
							<div class="block-title">
								
								<ul class="nav nav-tabs" data-toggle="tabs">
									<li>
										<a href="#block-tabs-complete" onclick="go(1)">完成情况</a>
									</li>
									<li class="active">
										<a href="#block-tabs-answer">答案查看</a>
									</li>
									<li class="answer hidden">
										<a href="#block-tabs-analysis" onclick="go(3)">结果查看</a>
									</li>
								</ul>
							</div>
							<!-- END Block Tabs Title -->

							<!-- Tabs Content -->
							<div class="tab-content">
								<div class="tab-pane" id="block-tabs-complete">

								</div>
								<div class="tab-pane active" id="block-tabs-answer">
									<div class="block full">
										<div class="row" style="vertical-align: middle;">
											<div class="col-md-2 text-right">
												<button id="btn-prev" type="button" class="btn btn-warning" onclick="nextQues(-1)">上一题</button>
											</div>
											<div class="col-md-8">
												<div class="block full" id="title">
													 
												</div>
											</div>
											<div class="col-md-2">
												<button id="btn-next" type="button" class="btn btn-warning" onclick="nextQues(1)">下一题</button>
											</div>
										</div>
									</div>
									<div class="block full">
										<div class="block-title">
											<!--<h2>详细数据</h2>-->
											<ul class="nav nav-tabs" data-toggle="tabs">
												<li class="active">
													<a href="#block-tabs-detail">详细数据</a>
												</li>
												<li id="tabs-ratio">
													<a href="#block-tabs-ratio">比例统计</a>
												</li>
											</ul>
										</div>
										<!--<div class="table-responsive">-->
										<div class="tab-content">
											<div class="tab-pane active" id="block-tabs-detail">
												<div id="answer-null" class="hidden" style="text-align: center;">暂无提交数据可查看</div>
												<table class="table table-bordered table-striped" id="answer-table">
												<thead>
													<tr>
										 	 	 		<th style="height: 40%; font-size: 2rem;">编号</th>
										 	 	 		<th style="height: 40%; font-size: 2rem;">答题时间</th>
										 	 	 		<th style="height: 40%;font-size: 2rem;">答案文本</th>
										 	 	 		<th style="height: 40%;font-size: 2rem;">操作</th>
										 	 	 		 
										 	 	 		</tr>
												</thead>
												<tbody id="tab_list"  class="table table-bordered table-striped"></tbody>				 
													<!-- delete Modal -->
													<div id="modal-delete" class="modal" tabindex="-1" role="dialog" aria-hidden="true">
														<div class="modal-dialog">
															<div class="modal-content">
																<div class="modal-header">
																	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
																	<h3 class="modal-title"><strong>提示</strong></h3>
																</div>
																<div class="modal-body">
																	是否删除..问卷？
																</div>
																<div class="modal-footer">
																	<button type="button" class="btn btn-effect-ripple btn-primary">确定</button>
																	<button type="button" class="btn btn-effect-ripple btn-danger" data-dismiss="modal">取消</button>
																</div>
															</div>
														</div>
													</div>
													<!-- END delete Modal -->

													<!-- update Modal -->
													<div id="modal-update" class="modal" tabindex="-1" role="dialog" aria-hidden="true">
														<div class="modal-dialog">
															<div class="modal-content">
																<div class="modal-header">
																	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
																	<h3 class="modal-title"><strong>提示</strong></h3>
																</div>
																<div class="modal-body">
																	是否更新..问卷？
																</div>
																<div class="modal-footer">
																	<button type="button" class="btn btn-effect-ripple btn-primary">确定</button>
																	<button type="button" class="btn btn-effect-ripple btn-danger" data-dismiss="modal">取消</button>
																</div>
															</div>
														</div>
													</div>
													<!-- END update Modal -->

													<!-- upload Modal -->
													<div id="modal-upload" class="modal" tabindex="-1" role="dialog" aria-hidden="true">
														<div class="modal-dialog">
															<div class="modal-content">
																<div class="modal-header">
																	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
																	<h3 class="modal-title"><strong>上传问卷</strong></h3>
																</div>
																<div class="modal-body">
																	<form action="page_app_media.html" class="dropzone"></form>
																</div>
																<div class="modal-footer">
																	<button type="button" class="btn btn-effect-ripple btn-primary">确定</button>
																	<button type="button" class="btn btn-effect-ripple btn-danger" data-dismiss="modal">取消</button>
																</div>
															</div>
														</div>
													</div>
													<!-- END upload Modal -->
												</table>
												<div id="layui" style="font-size: 2 rem;padding: 0 0 4% 0;"></div>	 	
											</div>
											<div class="tab-pane" id="block-tabs-ratio">
												<div id="data_null" class="hidden" style="text-align: center;">暂无提交数据可查看</div>
												<table id="ratio-datatable" class="table table-striped table-bordered table-vcenter table-hover table-condensed hidden" style="width: 100%;">
													
												</table>
											</div>
										</div>

									</div>

									<div class="tab-pane" id="block-tabs-analysis">

									</div>
								</div>
								<!-- END Tabs Content -->
							</div>
							<!-- END Block Tabs -->

						</div>
						<!-- END Page Content -->

					</div>
					<!-- END Main Container -->
				</div>
				<!-- END Page Container -->
			</div>
			<!-- END Page Wrapper -->

			<!-- jQuery, Bootstrap, jQuery plugins and Custom JS code -->
			<script src="js/vendor/jquery-2.2.4.min.js"></script>
			<script src="js/vendor/bootstrap.min.js"></script>
			<script src="js/plugins.js"></script>
			<script src="js/app.js"></script>
			<script src="js/layui.js"></script>
			<script src="js/layui.all.js"></script>
			<script src="js/lay/modules/laypage.js"></script>
			<!-- Load and execute javascript code used only in this page -->
			<script src="js/pages/uiTables.js"></script>
			<script>
				var ip;
				var id = '';
				//表格数据集合
				var dataSet = [],
					currNum = 1; //当前题号

				$(function() {
					var configJson='js/confing.json'
					$.getJSON(configJson,function(data){
					ip=data.urlip;
					identi()
					UiTables.init();
					getID();
					getName();
					getData('',currNum, '');
					});
				});
	
				function identi()
				{
				$.ajax({
     				type: "get",
   					url: ip+"/user/type",
  					data:{
  						
  					},
    				async: true,
    				dataType: "json",
     				xhrFields: {withCredentials: true},
    				crossDomain:true,
    				success: function(res) {
    					console.log("sssss")
    					console.log(res)
						if(res.code==-1)
						{
							 window.location.replace("login.html")
							 window.history.forward(1);
						}
    				},
    				async:false
     			});
				}
				
				function getID() {
					url = location.search;
					if(url.indexOf("?") != -1) { //判断是否有参数
						var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
						strs = str.split("="); //用等号进行分隔 （因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔）
						console.log(strs[1]); //直接弹出第一个参数 （如果有多个参数 还要进行循环的）
						id = strs[1];
					}
				}

				function logout(){
					$.ajax({
					type:"get",
					url:ip+"/logout",
					data:{},
					async:true,
					dataType: "json",
					xhrFields: {withCredentials: true},
      				crossDomain:true,
      				success:function(res)
      				{
      					 if(!res.code){
      					 	window.location.href="login.html"
      					 }
      				}
				});	
				}

				function getName() {
					$.ajax({
						type: "get",
						url: ip + '/survey/detail',
						data: {
							id: id
						},
						dataType: "json",
						contentType: "application/json",
						xhrFields: {
							withCredentials: true
						},
						crossDomain: true,
						success: function(res) {
							if(res.code == 0) {
								if(res.data.privately){
									$(".answer").removeClass("hidden")
								}
								var str = '-' + res.data.title;
								$("#survey-name").html(str);
								$("title").html("调查结果——"+res.data.title)
							}
						},
						async: true
					});
				}

				function go(index) {
					switch(index) {
						case 1:
							window.location.href = "completeSituation.html?id=" + id;
							break;
						case 2:
							window.location.href = "checkAnswer.html?id=" + id;
							break;
						case 3:
							window.location.href = "analysisAnswer.html?id=" + id;
							break;
						default:
							break;
					}
				}
				var sh;
				var total;
				function getData(pageconf,num, type) { //id,题号,选人的条件
					if(!pageconf){
					pageconf={};
					pageconf.pageSize=8;
					pageconf.currentPage=1;
					}	
					var getUrl = '/result/statistic';
					var options = {};

					if(type == '') {
						options = {
							page: pageconf.currentPage,
							size:pageconf.pageSize ,
							surveyId: id,
							orderNum: num
						}
					} else {
						options = {
							page: pageconf.currentPage,
							size:pageconf.pageSize ,
							surveyId: id,
							orderNum: num,
							criteria: type
						}
					}
					$.ajax({
						type: "get",
						url: ip + getUrl,
						data: options,
						dataType: 'json',
						xhrFields: {
							withCredentials: true
						},
						crossDomain: true,
						success: function(res) {
							console.log("=============");
							console.log(res);
							if(res.code == 0) {
								if($('#ratio-datatable').hasClass('dataTable')) {
									var oldTable = $('#ratio-datatable').dataTable();
									oldTable.fnClearTable(); //清空一下table
									oldTable.fnDestroy(); //还原初始化了的dataTable
									$('#ratio-datatable').empty();
								}
								console.log("ddddddddddddddddddddddd")
								var obj = {};
								if((res.data)&&(typeof res.data!="string")){
								obj.type = res.data.type;
								if(res.data.type == 'Blanks') {
									
										obj.result = res.data.填空题结果;
										obj.title = res.data.填空题题目;
										obj.stastic = '';

										if(!$("#tabs-ratio").hasClass("hidden")) {
											$("#tabs-ratio").addClass("hidden");
										}
									
								} else if(res.data.type == 'Single') {
									obj.result = res.data.具体答案和id;
									obj.title = res.data.选择题题目;
									obj.stastic = res.data.单选题统计结果;

									if($("#tabs-ratio").hasClass("hidden")) {
										$("#tabs-ratio").removeClass("hidden");
									}
									sh=obj.stastic
									console.log(obj.stastic)
									setTable1(obj.stastic);
								 
								}
								console.log(obj)
								setTitle(obj.title);
								total=obj.result.total;
								if(!total)
								{
									if(!$("#layui").hasClass("hidden"))
									{
										$("#layui").addClass("hidden")
									}
									if(!$("#answer-table").hasClass("hidden"))
									{
										$("#answer-table").addClass("hidden")
									}
									if($("#answer-null").hasClass("hidden"))
									{
										$("#answer-null").removeClass("hidden")
									}
									if(!$("#ratio-datatable_wrapper").hasClass("hidden"))
									{
										$("#ratio-datatable_wrapper").addClass("hidden")
									}
									if($("#data_null").hasClass("hidden"))
									{
										$("#data_null").removeClass("hidden")
									}
								}else{
									if($("#layui").hasClass("hidden"))
									{
										$("#layui").removeClass("hidden")
									}
									if($("#answer-table").hasClass("hidden"))
									{
										$("#answer-table").removeClass("hidden")
									}
									if(!$("#answer-null").hasClass("hidden"))
									{
										$("#answer-null").addClass("hidden")
									}
									if($("#ratio-datatable").hasClass("hidden"))
									{
										$("#ratio-datatable").removeClass("hidden")
									}
									if(!$("#data_null").hasClass("hidden"))
									{
										$("#data_null").addClass("hidden")
									}
								}
								getPage(pageconf,obj.result.datas,num,type);
								nextquesnull(num+1,'');
								}
							}
						},
						async: true
					});
				}
				
				function nextquesnull(num,type){
					var getUrl = '/result/statistic';
					if($("#btn-next").hasClass("hidden")) {
						$("#btn-next").removeClass("hidden");
					}
					var options = {};

					if(type == '') {
						options = {
							surveyId: id,
							orderNum: num
						}
					} else {
						options = {
							surveyId: id,
							orderNum: num,
							criteria: type
						}
					}
					$.ajax({
						type: "get",
						url: ip + getUrl,
						data: options,
						dataType: 'json',
						xhrFields: {
							withCredentials: true
						},
						crossDomain: true,
						success: function(res) {
							if(res.code == 0) {
								if(res.data.type == 'Blanks') {
									if(!res.data.填空题题目){	
										if(!$("#btn-next").hasClass("hidden")) {
											$("#btn-next").addClass("hidden");
										}
									}
								}else if(res.data.type == 'Single') {
									if(!res.data.选择题题目){
										if(!$("#btn-next").hasClass("hidden")) {
											$("#btn-next").addClass("hidden");
										}
									}
								}
								}
							}
						});
				}
				
			 function getPage(pageconf,data,num,type){
					layui.use(['laypage','layer'],function(){
					var laypage=layui.laypage;
						
					laypage.render({
						elem:'layui',
						count:total,
						skin:'#7c62ad',
						curr:pageconf.currentPage,
						limit:pageconf.pageSize,
						skip:true,
						first:"首页",
						last:"尾页",
						layout:['skip', 'next', 'prev'],
						jump:function(obj,first){
							page=obj.curr;
							limit=obj.limit;
							if(!first){
								 pageconf.currentPage=obj.curr;
								 pageconf.pageSize=obj.limit;
								 getData(pageconf,num,type);
							}
						}
						 
						
					});
					fillTable(data,(pageconf.currentPage-1)*pageconf.pageSize);
					
				});
				}
				
				
				//填充表格
			function fillTable(date,num){
					var info='';
					$.each(date, function(index,obj) {
					index=index+num+1;				
					info += "<tr class='column center'  ><td class='column'>" + index + "</td><td class='column'>" + obj.time+ "</td><td class='column'>"+obj.answer+"</td><td class='column'>"+"<button class='btn btn-effect-ripple btn-info ml-2' id='btn-detail' name='" + obj.id + "' onclick='checkDetail(this.name)'>查看答卷</button></td>" 
					});	
					$("#tab_list").html(info);
				}
				
				//上一题、下一题
				function nextQues(step) {
					currNum = currNum + step;
					getData('',currNum, '');
				}

				function setTitle(data) {
					var str = currNum + '.' + data;
					$("#title").html(str);

					if(currNum == 1) {
						$("#btn-prev").addClass("hidden");
					} else {
						if($("#btn-prev").hasClass("hidden")) {
							$("#btn-prev").removeClass("hidden");
						}
					}
				}
				
				//详细数据
				function setTable(data) {
					$('#example-datatable').dataTable({
						data: data,
						columns: [{ //第一列序列化
							title: '编号',
							className: 'text-center',
							data: null,
							render: function(data, type, full, meta) {
								return meta.row + 1 + meta.settings._iDisplayStart;
							}
						}, {
							title: '答题时间',
							className: 'text-center',
							data: 'time'
						}, {
							title: '答案文本',
							className: 'text-center',
							data: 'answer'
						}, {
							title: '操作',
							className: 'text-center',
							render: function(data, type, row) {
								//data为当前列的数据
								//type为当前列数据类型
								//row为当前行数据
								var rowData = JSON.stringify(row);
								//获取当前行的id
								var id = JSON.parse(rowData).id;
								var str = "<button class='btn btn-effect-ripple btn-info ml-2' id='btn-detail' name='" + id + "' onclick='checkDetail(this.name)'>查看答卷</button>";
								return str;
								//此处return可自己定义，传参须注意，若传字符串需加上转义字符，否则会报错ReferenceError: XXX is not defined at HTMLAnchorElement.onclick
							}
						}],
						columnDefs: [{
							orderable: false,
							targets: [0, 3]
						}],
						pageLength: 10,
						lengthMenu: [
							[5, 10, 20],
							[5, 10, 20]
						]
					});
				}

				function setTable1(data) {
					$('#ratio-datatable').dataTable({
						data: data,
						columns: [{
							title: '选项',
							className: 'text-center',
							data: 'answer'
						}, {
							title: '小计',
							className: 'text-center',
							data: 'count'
						}, {
							title: '比例',
							className: 'text-center',
							data: 'percents'
						}],
						columnDefs: [{
							orderable: false,
							targets: [0, 2]
						}],
						paging: false,
						searching: false
					});
				}

				function checkDetail(id) {
					var url = "checkAnswerPaper.html?id=" + id;
					window.open(url, '_blank');
				}
			</script>

	</body>

</html>